---
import ItemContent from "@components/style/ItemContent.astro";
interface Props {
  classAppend: string;
}
const { classAppend } = Astro.props;
---

<ItemContent classStyle={classAppend}>
  <div class="group grid max-lg:grid grid-cols-6 gap-4">
    <div
      class="col-start-1 col-end-3 max-lg:col-start-1 max-lg:col-end-7 rounded-lg overflow-hidden h-48"
      th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/nice/static/images/thumbs/}"
    >
      <img
        class="h-48 w-full object-cover rounded-lg transition ease-in-out delay-150 group-hover:scale-110 duration-300"
        th:alt="${article.articleTitle}"
        th:src="${(imgs==null)?iul+rando+'.jpg':(imgPrefix+imgs[0])}"
      />
    </div>
    <div
      class="col-start-3 col-end-7 max-lg:col-start-1 max-lg:col-end-7 text-gray-900 dark:text-white h-full flex flex-col justify-between px-1"
    >
      <!-- 标题和摘要 -->
      <div class="card-list-body text-wrap">
        <a
          th:href="${webConfig['oly.web.domain']+'/article/'+article.articleId}"
        >
          <h3 class="text-lg font-semibold line-clamp-2 mb-1.5" th:text="${article.articleTitle}">
            Top amazing web demos and experiments in 2024 should know about
          </h3>
        </a>
        <p
          class="card-list-text text-sm/6 text-gray-500 dark:text-gray-400 line-clamp-2 mb-2"
          th:text="${article.articleSummary}"
        >
          consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
          ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
          veniam,
        </p>
      </div>
      
      <!-- 底部信息区域 -->
      <div>
        <!-- 作者信息和发布时间 -->
        <div class="flex flex-wrap items-center justify-between text-xs mb-1.5"  th:with="articleCount=${article.articleCount},user=${article.createUser}">
          <!-- 作者信息和发布时间 -->
          <div class="flex items-center mr-3">
            <a href="javascript:void(0)">
              <img
                th:src="${imgPrefix+user.avatar}"
                th:alt="${user.nickName}"
                class="rounded-full w-6 h-6 mr-1.5"
              />
            </a>
            <a href="javaScript:void(0)">
              <span class="font-semibold text-black dark:text-white" th:text="${user.nickName}">Johnson smith</span>
            </a>
            <!-- 发布时间 -->
            <div class="flex items-center text-gray-500 ml-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-3.5 h-3.5 mr-1"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
                ></path>
              </svg>
              <span th:data-time="${article.createTime}" class="show-create-time">27天前</span>
            </div>
          </div>
          
          <!-- 交互数据 -->
          <div class="flex items-center gap-2" th:if="${articleCount!=null}">
            <!-- 浏览量 -->
            <div class="flex items-center text-gray-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-3.5 h-3.5 mr-1"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
                ></path>
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
                ></path>
              </svg>
              <span th:data-count="${articleCount.recordLook}" class="show-k">156.9k</span>
            </div>
            
            <!-- 点赞数 -->
            <div class="flex items-center text-gray-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-3.5 h-3.5 mr-1"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
                ></path>
              </svg>
              <span th:data-count="${articleCount.recordLike}" class="show-k">156.9K</span>
            </div>
            
            <!-- 评论数 -->
            <div class="flex items-center text-gray-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-3.5 h-3.5 mr-1"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
                ></path>
              </svg>
              <span th:data-count="${articleCount.recordDiscuss}" class="show-k">156.9K</span>
            </div>
          </div>
        </div>
        
        <!-- 分类和标签 - 合并到一行 -->
        <div class="flex items-center flex-wrap gap-x-2">
          <!-- 分类 -->
          <div class="flex items-center text-xs" th:if="${article.mapCategory['classify']}">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-3 h-3 inline mr-0.5 text-gray-500"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
              ></path>
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6 6h.008v.008H6V6Z"></path>
            </svg>
            <span
              th:each="category:${article.mapCategory['classify']}"
              class="bg-gray-100 text-gray-800 text-xs font-medium me-1.5 px-2 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300"
            >
              <a
                th:href="${webConfig['oly.web.domain']+'/category/'+category.categoryId}"
                th:title="${category.categoryName}"
                th:text="${category.categoryName}">分类</a
              >
            </span>
          </div>
          
          <!-- 标签 -->
          <div class="flex items-center text-xs" th:if="${article.mapCategory['tag']}">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-3 h-3 inline mr-0.5 text-green-500"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15 13.5H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
              ></path>
            </svg>
            <span
              th:each="category:${article.mapCategory['tag']}"
              class="bg-green-100 text-green-800 text-xs font-medium me-1.5 px-2 py-0.5 rounded dark:bg-green-900 dark:text-green-300"
            >
              <a
                th:href="${webConfig['oly.web.domain']+'/category/'+category.categoryId}"
                th:title="${category.categoryName}"
                th:text="${category.categoryName}">标签</a
              >
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</ItemContent>
